<template>
    <div class="reveal" ref="revealText">
        <span v-for="(item,index) in text.split('')" :key="index" :style="{animationDelay: delay+0.3+Math.abs(index - middle)*0.1+'s',fontSize:myFontSize}">{{item}}</span>
    </div>
</template>

<script>
import "@/assets/css/reveal.css";
export default {
    name:"fontEffectReveal",
    props:{
        text:{
            type: String,
            default:()=>"默认的文字"
        },
        delay:{
            type: Number,
            default:()=>0
        },
        myFontSize:{
            type: String
        }
    },
    computed:{
        middle(){
            return this.text.split("").filter(e=>e!==" ").length/2;
        }
    }
}
</script>

<style>

</style>